<template>
  <z-modal
    title="通知详情"
    :width="800"
    v-bind="modalOption"
    @cancel="handleCancel"
    :okButtonProps="{ class: { '!hidden': true }}"
    :bodyStyle="{ padding:'0px' }"
  >
    <a-card :bordered="false" :bodyStyle="{ padding:'10px 24px' }">
      <h1 class="font-semibold text-center" style="font-size:18px;" >{{content.messageTitle}}</h1>
      <a-divider class="!m-3" />
      <a-card-meta class="text-center" :description="'发布人：' + content.fromNickName + ' 发布时间： ' + content.createTime"> </a-card-meta>
      <a-divider class="!m-3" />
      <div class="overflow-y-scroll" :style="{'max-height':height+'px'}">
        <span v-html="content.messageContent" class="article-content"></span>
      </div>
    </a-card>
  </z-modal>
</template>

<script>
import ModalMixins from '@/mixins/ModalMixins'
import { getAction } from '@/services/manage'
export default {
  name: 'MessageModal',
  mixins: [ModalMixins],
  data() {
    return {
      url: {
        read: '/message/read/'
      },
      content: {},
      channelCode: '',
      height: 500
    }
  },
  methods: {
    show(data, channelCode) {
      this.visible = true
      this.content = data
      this.channelCode = channelCode
      this.read()
      this.$nextTick(() => {
        this.setTableHeight()
      })
    },
    read() {
      getAction(`${this.url.read}${this.channelCode}/${this.content.id}`).then(res => {
        if (res.success) {
          this.$emit('ok')
        }
      })
    },
    setTableHeight() { // 获取页面高度
      const clientHeight = document.documentElement.clientHeight
      this.height = clientHeight - 250
    }
  }
}
</script>
